<template>
  <div id="vxePulldownSelection">
    <vxe-pulldown :ref="'xDown4' + compId" transfer span="24" style="width: 100%">
      <template #default>
        <vxe-textarea class-name="width-100-percentage" class="enterNextInputFlag" v-model="keyvalue" autocomplete="off" auto-complete="new-password" :disabled="caUse" :readonly="isReadonly" suffix-icon="vxe-icon-num-list" placeholder="请选择" @keydown="enterConfirmEvent" @focus="focusEvent4" @blur="blurEvent4" @change="inputChange" @suffix-click="suffixClick4" @clear="clearConfirmEvent" clearable></vxe-textarea>
      </template>
      <template #dropdown>
        <div class="my-dropdown4 radius round shadow-warp lines-orange solid" :style="{ width: panelWidth, height: panelHeight }">
          <Splitpanes class="default-theme" horizontal>
            <Pane>
              <el-divider content-position="left">诊断模板</el-divider>

              <div class="diag-temp">
                <div class="diag-item" v-for="diag in typeList" :key="diag.id">
                  <el-tag type="success" size="small" @click="diag.isCollapse = !diag.isCollapse">
                    <!-- <template #default> -->
                    {{ diag.name }}
                    <span :class="diag.isCollapse
                          ? 'vxe-icon-arrow-up'
                          : 'vxe-icon-arrow-down' "></span>
                  </el-tag>
                  <div class="item-children" v-if="diag.isCollapse">
                    <el-tag size="small" v-for="child in diag.diagnosTempList" :key="child.id" @click="showDiagDesc(child)">
                      {{ child.tempName }}
                      <span class="vxe-icon-copy" @click="addDiag(child.tempName)" style="background-color: greenyellow;"></span>
                    </el-tag>
                  </div>
                </div>
              </div>
            </Pane>
            <Pane>
              <el-divider content-position="left">
                {{
                diagDesc.tempName
                }}
              </el-divider>
              <div class="diag-desc" v-for="desc in diagDesc.descList" :key="desc.id">
                <el-tag type="info" size="small">
                  <span style="margin-right:5px" v-html="
                      desc.descText
                        ? desc.descText.replace(/\n|\r\n/g, '<br>')
                        : ''
                    "></span>
                  <el-button class="diag-btn" type="warning" @click="selectDiagDesc(desc)">替换</el-button>
                  <el-button class="diag-btn" type="success" @click="addDiagDesc(desc)">追加</el-button>
                </el-tag>
              </div>
            </pane>
          </Splitpanes>
        </div>
      </template>
    </vxe-pulldown>
    <!-- <span>这是组件</span> -->
  </div>
</template>
<script lang="ts" setup>
//#region  依赖注入
import { ref, reactive, getCurrentInstance, nextTick, onMounted, watch, defineProps } from 'vue';
import { pageSizes, IsEmpty, newGuid, sortByField } from '@/utils/common';
import { Splitpanes, Pane } from 'splitpanes';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';

//#region  变量
let { proxy }: any = getCurrentInstance();
let a = reactive(pageSizes);
let b = ref(newGuid());
let compId: string = newGuid();
let keyvalue = ref('');
let caUse = ref(false);
let isReadonly = ref(false);

let selectedItem = {
  id: null,
  name: ''
};

// 父组件传值
let props = defineProps({
  url: String, //数据请求地址
  requestType: { type: String, default: 'get' }, //请求方式
  displayTexts: Array as () => String[], //显示字段集合
  displayTextObj: String, //显示字段集合
  dataObj: {}, //接口参数。{key1:value1,key2:value2...}
  isDisabled: Boolean, //是否可用
  isReadonly: Boolean, //是否只读
  childIndex: Number, //子航索引
  aimKeys: { type: Array as () => String[], default: [] }, //目标字段
  resItem: String, //返回数据中，包含所需数据的名称
  isChangeName: Boolean, //输入框内容是否可手动更改
  compName: String, //组件名称
  dataName: String, //请求数据结构名称
  isRow: Boolean,
  rowIndex: String,
  panelWidth: { type: String, default: '800px' },
  panelHeight: { type: String, default: '500px' }
}) as any;

watch(
  () => props.displayTextObj,
  (n, o) => {
    keyvalue.value = n;
  },
  {
    deep: true,
    immediate: true
  }
);
watch(
  () => props.baseList,
  (newval, oldvbal) => {
    /*keyvalue.value = newval;*/
    //console.log(3333,newval)
  },
  {
    deep: true,
    immediate: true
  }
);

watch(
  () => props.isDisabled,
  (newval, oldvbal) => {
    caUse.value = newval;
  },
  {
    deep: true,
    immediate: true
  }
);

//#region  生命周期函数
onMounted(() => {
  //todo
});
//#endregion
let rowObj: any;

//回车选中
function enterConfirmEvent({ value, $event }) {
  if ($event && ($event.keyCode === 13 || $event.keyCode === 9)) {
    const $xDown4 = proxy.$refs['xDown4' + compId] as any;
    if ($xDown4.isPanelVisible()) {
    }
  }
}

// 获取焦点
function focusEvent4() { 
  const $xDown = proxy.$refs['xDown4' + compId] as any;
  $xDown.showPanel();
  proxy.$nextTick(() => {
    diagDesc.tempName = '';
  diagDesc.descList.length = 0;
  rowObj = props.dataObj;
  findDiagnosTypeAndTemp();
  });
}
// 失去焦点
function blurEvent4({ value }) {
  // 输入框内容未改变
  if (value === proxy.displayTextObj) {
    return;
  }
  proxy.$emit('confirmClick', value);
}
function inputChange(e) {
  //todo
}

function keyupEvent4() {
  const $xTable = proxy.$refs['xDown4' + compId] as any;
  $xTable.showPanel();
}

function suffixClick4() {
  const $xDown = proxy.$refs['xDown4' + compId] as any;
  $xDown.togglePanel();
}
// 清空
function clearConfirmEvent() {
  //todo
  proxy.$emit('confirmClick', {
    childIndex: proxy.childIndex,
    row: { ...{ id: null }, entity: { id: null } },
    aimKeys: proxy.aimKeys,
    compName: proxy.compName
  });
}
function editMethodExmItem4() {
  //todo
}
//行选中
// function cellClickEvent4({ row }) {
//   const $xDown = proxy.$refs['xDown4' + compId] as any;
//   if (IsEmpty(row)) {
//     $xDown.hidePanel();
//     return;
//   }
//   keyvalue.value = row.name;
//   proxy.$emit('confirmClick', keyvalue.value);
//   $xDown.hidePanel();
// }

//#endregion

let typeList: any = reactive([]); //最左侧字典分类列表数据
let diagDesc: any = reactive({
  tempName: '',
  descList: []
}); //最左侧字典分类列表数据

// 获取字典分类列表(树) 刷新
function findDiagnosTypeAndTemp() {
  console.log(rowObj);
  
  typeList.length = 0; //放入数据前清空数据
  diagDesc = reactive({
    tempName: '',
    descList: []
  });
  const url = '/lab/diagnosType/findDiagnosTypeAndTemp';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        code: rowObj.typeCode
      }
    })
    .then((res: any) => {
      typeList.push(...res.data);
      for (let typeObj of typeList) {
        typeObj.isCollapse = false;
      }
    })
    .catch((err: any) => {
      VxeMessage('获取字典分类列表失败', VxeNotifyType.error);
    });
}

function showDiagDesc(diag) {
  diagDesc.tempName = diag.tempName;
  diagDesc.descList = diag.diagnosTempDescList;
}
function addDiag(diag) {
  let obj = {
    type: 'append',
    tempName: diag
  };
  proxy.$emit('sltDiagnosTempInfo', obj);
}
function selectDiagDesc(desc) {
  let obj = {
    type: 'replace',
    tempName: diagDesc.tempName,
    descText: desc.descText
  };
  proxy.$emit('sltDiagnosTempInfo', obj);

}
function addDiagDesc(desc) {
  let obj = {
    type: 'append',
    tempName: diagDesc.tempName,
    descText: desc.descText
  };
  proxy.$emit('sltDiagnosTempInfo', obj);

}
</script>
<style lang="scss" scoped>
#vxePulldownSelection {
  :deep(.my-dropdown4) {
    padding: 4px;
    min-width: 400px;
    height: 450px;
    background-color: #fff;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

  :deep(.vxe-pager.size--mini) {
    height: 33px !important;
  }

  
  .mb10 {
    margin-bottom: 10px;
  }
  .no-data {
    width: 500px;
    height: 300px;
  }
  .el-main {
    padding: 0;
    overflow-y: auto;
  }
  .el-aside {
    border-left: $border-1;
  }
  .el-descriptions {
    width: 760px;
  }
  .el-descriptions-item__label {
    width: 70px;
  }
  .tools {
    padding-top: 0;
    margin-top: 0 !important;
    .btn-refresh {
      padding: 7px 15px;
    }
    .el-divider {
      margin-bottom: 15px;
      margin-top: 40px;
      width: 300px;
    }
    .content {
      width: 600px;
      .el-textarea__inner {
        font-size: 20px;
        // font-weight: bold;
      }
    }
    .large-img {
      width: 750px;
      height: 250px;
      margin-right: 10px;
      display: inline-block;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
      position: relative;
      .camVideo {
        #video {
          width: 750px;
          height: 250px;
        }
        // #canvas {
        //   width: 670px;
        //   height: 400px;
        //   position: absolute;
        //   top: 0px;
        //   left: 0px;
        // }
        .btn {
          position: absolute;
          bottom: 20px;
          left: calc(50% - 50px);
          width: 100px;
          text-align: center;
          opacity: 0.8;
          z-index: 1;
        }
      }
      .no-data {
        width: 490px;
        height: 280px;
        img {
          object-fit: none;
        }
      }
      img {
        object-fit: contain;
        width: 100%;
        height: 100%;
      }
      .el-image {
        object-fit: contain;
        width: 100%;
        height: 100%;
      }
      .img-tools {
        position: absolute;
        top: 0px;
        right: -105px;
        .el-button {
          display: block;
          margin: 0 0 5px 0;
        }
      }
    }

    .img-list {
      width: 750px;
      height: 180px;
      overflow-x: auto;
      overflow-y: hidden;
      display: block;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 5px 5px 0 5px;
      margin-top: 5px;
      margin-bottom: 10px;
      position: relative;
      .el-upload-list__item {
        border: 0;
        width: 155px;
        height: 160px;
        display: inline-block;
        margin-bottom: 0px;
        cursor: pointer;
        border-radius: 0;
      }
      .el-upload-list__item-thumbnail {
        width: 140px;
        height: 140px;
        img {
          border-radius: 5px;
        }
      }
      .uploadImg {
        width: 75px;
        height: 75px;
        display: inline;
        margin-right: 10px;
        .el-upload--picture-card {
          width: 70px;
          height: 75px;
          line-height: 80px;
        }
      }
      .del-icon {
        position: absolute;
        right: 0;
        top: -4px;
        color: $info-color;
        opacity: 0.7;
        i {
          font-size: 16px;
        }
      }
      .ok-icon {
        position: absolute;
        right: 50px;
        bottom: -6px;
        color: $brand-color;
        i {
          font-size: 17px;
        }
      }
      .select-rpt {
        position: absolute;
        padding: 0;
        bottom: 0px;
        left: 30px;
        font-size: 16px;
      }
      .warning {
        color: $warning-color;
      }
    }

    .div-inline {
      display: inline-block;
      margin-right: 10px;
    }
  }

  .sign-img {
    width: 200px;
    height: 60px;
    border: $border-1;
  }
  .no-sign {
    color: $font-color-4;
    font-style: italic;
  }
  .img-diag {
    height: 90%;
    overflow: auto;
  }
  .el-drawer__header {
    margin-bottom: 5px;
  }
  .diag-temp {
    margin-top: 0px;
    .el-tag {
      height: 25px;
      line-height: 24px;
      cursor: pointer;
    }
    .diag-item {
      padding: 5px;
      .el-button {
        padding: 2px;
      }
      .item-children {
        margin: 5px 0 0 20px;
        .el-tag {
          margin-right: 10px;
        }
      }
    }
  }
  .diag-desc {
    line-height: 20px;
    font-size: 14px;
    padding: 5px 10px;
    .dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-bottom: 1px;
      margin-right: 5px;
      border-radius: 4px;
      background-color: $font-color-3;
    }
    .el-tag {
      width: 100%;
      white-space: pre-wrap;
      height: auto;
      padding-top: 5px;
      padding-bottom: 5px;
    }
  }
  .diag-btn {
    padding: 2px 7px;
    margin-top: 3px;
  }
  .el-button--small {
    --el-button-size: 20px;
  }
  .el-divider {
    margin: 15px 5px;
  }
  .el-container {
    overflow-y: auto;
    .btn-viewtemp {
      position: absolute;
      top: 0;
      right: 10px;
    }
  }
}


</style>
